/***************************标题开始***************************/
.guest-box .box-title>a {
  display: inline-block;
  width: 35%;
  min-width: 200px;
  height: 48px;
  line-height: 44px;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 30px;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 5px 5px 5px #ccc;
  background: transparent;
  color: #6d7ee9;
  font-weight: bold;
  font-size: 20px;
  vertical-align: top;
}

.guest-box a span {
  font-size: 16px;
}

.guest-book-info {
  display: block;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid #e0e0e0;
  padding: 0px 20px 20px 20px;
  color: #666;
}

.guest-book-info .info-message,
.guest-book-info .warning-message{
  color: #999;
}

.guest-book-info i {
  display: inline-block;
  font-size: 20px;
  margin-right: 10px;
}

.guest-book-info h4 {
  display: inline-block;
}
.guest-book-info p {
  margin-left: 10px;
  margin-bottom: 5px;
}

/***************************标题结束***************************/

/***************************留言开始***************************/
.comment-box {
  display: block;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid #e0e0e0;
  padding: 20px;
  color: #666;
  margin-top: 30px;
}

.comment-box  .comment-list {
  width: 100%;
  padding: 0px;
}

.comment-box  .comment-list  .no-comment-box {
  border: 1px dashed #ccc;
  font-size: 18px;
  letter-spacing: 1px;
  text-align: center;
  height: 90px;
  line-height: 90px;
  color: #ccc;
  border-radius: 10px;
}

.comment-box  .comment-list .comment-item {
  list-style: none;
  position: relative;
  border: 1px solid #ccc;
  box-shadow: 5px 5px 5px #e0e0e0;
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 15px;
}

.comment-box  .comment-list .comment-item .item-top {
  width: 100%;
  /*height: 80px;*/
  /*padding-top: 5px;*/
  /*box-sizing: border-box;*/
}

.comment-box  .comment-list .comment-item .item-top img {
  display: inline-block;
  width: 50px;
  vertical-align: top;
  /*border: 1px solid #666;*/
  /*box-shadow: 2px 2px 2px #e0e0e0;*/
}

.comment-box  .comment-list .comment-item .item-top .info {
  display: inline-block;
  /*width: 200px;*/
  height: 60px;
  padding-top: 5px;
  margin-left: 10px;
}

.comment-box  .comment-list .comment-item .item-top .info .name {
  color: #6d7ee9;
}

.comment-box  .comment-list .comment-item .item-top .info .time {
  color: #ccc;
  margin-top: 2px;
}

.comment-box  .comment-list .comment-item .item-middle {
  width: 100%;
}

.comment-box  .comment-list .comment-item .item-middle .quote {
  background-color: #e0e0e0;
  padding: 10px 10px 10px 10px;
  border-radius: 5px;
  margin-left: 20px;
}

.comment-box  .comment-list .comment-item .item-middle .quote blockquote {
  margin-bottom: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
}

.comment-box  .comment-list .comment-item .item-middle .quote blockquote p {
  font-size: 12px;
  margin-bottom: 5px;
}

.comment-box  .comment-list .comment-item .item-middle .quote blockquote p:last-child {
  margin-left: 10px;
}

.comment-box  .comment-list .comment-item .item-middle .reply {
  margin-top: 5px;
  margin-left: 10px;
}

.comment-box  .comment-list .comment-item .item-middle .reply p {
  word-break: normal;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.comment-box  .comment-list .comment-item .viewpoint {
  width: 100%;
  padding-left: 10px;
  color: #6d7ee9;
}

.comment-box  .comment-list .comment-item .viewpoint li {
  list-style: none;
  float: left;
  width: 100px;
  cursor: pointer;
}

.comment-box  .comment-list .comment-item .viewpoint li i {
  font-size: 14px;
}

.comment-box  .comment-list .comment-item .viewpoint li:last-child i {
  font-size: 16px;
}

.comment-box  .comment-list .comment-item .viewpoint li a {
  color: #6d7ee9;
}

.comment-box  .comment-list .comment-item .floor-num {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #ccc;
}

.comment-box .comment-list .comment-item .admin-common-tag {
  display: inline-block;
  transform: scale(0.9, 0.9);
  width: 35px;
  text-align: center;
  height: 20px;
  line-height: 17px;
  position: absolute;
  top: 45px;
  left: -5px;
  color: white;
  /*padding: 0px 5px;*/
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  box-shadow: 2px 2px 2px #e0e0e0;
  /*border: 1px solid #666;*/
}

.comment-box  .comment-list .comment-item .root-tag {
  background-color: orangered;
}

.comment-box  .comment-list .comment-item .admin-tag {
  background-color: #6d7ee9;
}

.comment-box .pagination {
  margin-top: 5px;
  margin-bottom: 0px;
  margin-right: 0px;
  box-shadow: 2px 2px 2px #e0e0e0;
}

.comment-box .pagination li a {
  height: 36px;
  width: 33px;
  line-height: 24px;
  font-size: 12px;
  padding-left: 0px;
  padding-right: 0px;
  text-align: center;
  color: #999;
}

.comment-box .pagination .active a {
  background-color: #6d7ee9;
  color: #fff;
}

.comment-box .pagination li:first-child a,
.comment-box .pagination li:last-child a {
  font-size: 14px;
}

.comment-box .info-input {
  margin-top: 40px;
}

.comment-box .info-input .form-group {
  position: relative;
  display: inline-block;
}

.comment-box .info-input .form-group .must-mark {
  position: absolute;
  top: 5px;
  left: 25px;
  color: red;
}

.comment-box .info-input .form-group input {
  display: inline-block;
  width: auto;
  margin-right: 20px;
  margin-left: 5px;
  box-shadow: 2px 2px 2px #e0e0e0;
}

.comment-box .info-input .form-group:last-child input {
  width: 250px;
}

.comment-box .comment-editor {
  width: 100%;
  margin: 0px auto 10px auto;
  box-shadow: 2px 2px 2px #e0e0e0;
}

.comment-box .comment-editor .editor {
  height: 180px;
}

.comment-box>button {
  display: block;
  width: 100%;
  height: 25px;
  line-height: 25px;
  border: none;
  outline: none;
  background-color: #6d7ee9;
  color: #fff;
  margin-top: 10px;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #e0e0e0;
}

.comment-box .forbidComment-box {
  display: inline-block;
  width: auto;
  padding-left: 10px;
  padding-right: 10px;
  height: 30px;
  line-height: 30px;
  background-color: #e0e0e0;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #e0e0e0;
}

.comment-box .forbidComment-box i {
  display: inline-block;
  margin-right: 5px;
  vertical-align: top;
}

/***************************留言结束***************************/